<template >
  <div class="flex-1 overflow-hidden flex vertical">
    <slot name="head"></slot>
    <div class="flex-1 overflow-auto refresh-page" ref="box" @scroll="scroll">
      <div class="refresh-load">
        <van-pull-refresh v-model="isDownLoading" @refresh="refresh">
          <van-list
            ref="list"
            v-model="isUpLoading"
            :offset="100"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="immediateCheck"
          >
            <slot v-bind:list="list" />
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { debounce } from "@utils/index";
export default {
  props:{
    maxPage:{
      type:[Number,String],
      default:0
    },
    immediateCheck:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      count: 1,
      isDownLoading: false,

      list: [],
      isUpLoading: false,
      finished: false,
      scrollList: [], //[{start:0, end:200}]
      curScrollPage: 1
    };
  },
  watch: {},
  created() {},
  mounted() {
    // this.$refs.list.check();
  },
/*   watch:{
    immediateCheck(v){
      this.$refs.list.check();
    }
  } */
  methods: {
    reset(){
      this.count= 1
      this.isDownLoading= false

      this.list= []
      this.isUpLoading= false
      this.finished= false
      this.scrollList= [] 
      this.curScrollPage= 1
    },
    check(){
      this.$refs.list.check();
    },
    onLoad(type = "load") {
      // 异步更新数据
      this.$emit("getDate", {
        curPage: this.count,
        type,
        // callback: ({ maxPage }) => {
        //   this.count += 1;

        //   // 加载状态结束
        //   this.isUpLoading = false;
        //   this.isDownLoading = false;
        //   // 数据全部加载完成
        //   if (this.count > maxPage) {
        //     this.finished = true;
        //   }
        //   //是为了isUpLoading、isDownLoading、finished等设置完后再调用
        //   this.$nextTick(() => {
        //     this.saveScrollData({
        //       page: this.count,
        //       type
        //     });
        //   });
        // }
      });
    },
    updateState({type}){
      const {maxPage}=this;
      
        this.count += 1;

        // 加载状态结束
        this.isUpLoading = false;
        this.isDownLoading = false;
        // 数据全部加载完成
        if (this.count > maxPage) {
          this.finished = true;
        }
        //是为了isUpLoading、isDownLoading、finished等设置完后再调用
        this.$nextTick(() => {
          this.saveScrollData({
            page: this.count,
            type
          });
        });
    },
    refresh() {
      this.$refs.box.scrollTop = 0;
      this.count = 1;
      this.finished = false;
      // 加载状态结束
      this.isUpLoading = true;
      this.onLoad("refresh");
    },
    saveScrollData({ page, type }) {
      //两个异步为了放到队列的尾部执行
      this.$nextTick(() => {
        let { scrollHeight } = this.$refs.box.querySelector(".van-list");

        if (type === "refresh") {
          this.scrollList = [
            {
              start: 0,
              end: scrollHeight,
              scrollPage: 1
            }
          ];
        } else {
          let findPage = this.scrollList.find(item => item.scrollPage == page);
          if (!findPage) {
            let prev = this.scrollList[page - 1] || {};
            this.scrollList.push({
              start: prev.end || 0,
              end: scrollHeight,
              scrollPage: this.scrollList.length + 1
            });
          }
        }
        //请求完成需要再检验一次
        this.scroll();
      });
    },
    scroll() {
      debounce(() => {
        let { scrollTop, offsetHeight } = this.$refs.box;
        let top = scrollTop + offsetHeight;
        let { scrollPage } =
          this.scrollList.find(item => item.start <= top && item.end > top) ||
          {};
        let len = this.scrollList.length;
        let last = this.scrollList[len - 1] || {};
        // 超过最后一个，显示加载中的时候当前页面就是最后一项
        if (!scrollPage && len && top >= last.end) {
          this.$emit("scrollList", {
            scrollPage: last.scrollPage
          });
        } else {
          this.$emit("scrollList", { scrollPage });
        }
      }, 200)();
    }
  }
};
</script>
<style lang="less" scoped>
.refresh-load {
  .van-pull-refresh,
  .van-pull-refresh__track {
    height: 100%;
  }
}
.refresh-page {
  height: 100%;
  width: 100%;
}
</style>

